<template>
  <div>

        <div class="login-container">
          <el-form ref="form"  label-width="100px" class="login-form">
            <h2 class="login-title">修改用户密码</h2>
            <i class="el-icon-user-solid"></i>
            <el-form-item label="用户名" icon="el-icon-user-solid">
              <el-input v-model="loginUserName"></el-input>
            </el-form-item>
            <el-form-item label="旧密码" >
              <el-input v-model="oldPassword"></el-input>
            </el-form-item>
            <el-form-item label="新密码" >
              <el-input v-model="newPassword"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" >
              <el-input v-model="sureNewPassword"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="register" class="loginButton">更改密码</el-button>
            </el-form-item>
          </el-form>

        </div>

  </div>
</template>

<script>
import Navigation from "@/components/Navigation";
import HeaderMenu from "@/components/HeaderMenu";
export default {
  name: "registerSupplier",

  data(){
    return{
      loginUserName:'',
      oldPassword:'',
      newPassword:'',
      sureNewPassword:'',
    }
  },
  methods:{
    register(){
      if (this.loginUserName == '') {
        this.$message({
          message: '用户名必填',
          type: 'warning'
        });
        return
      }
      if (this.oldPassword == '') {
        this.$message({
          message: '旧密码必填',
          type: 'warning'
        });
        return
      }
      if (this.newPassword == '') {
        this.$message({
          message: '新密码必填',
          type: 'warning'
        });
        return
      }
      if (this.sureNewPassword == '') {
        this.$message({
          message: '请确认新密码',
          type: 'warning'
        });
        return
      }
      let fd = new FormData()
      fd.append("loginUserName",this.loginUserName);
      fd.append("oldPassword",this.oldPassword);
      fd.append("newPassword",this.newPassword);
      fd.append("sureNewPassword",this.sureNewPassword);
      this.$axios.post("api/updateUserPwd",fd).then(
          r=>{
            if (r.data.code == 200) {
              this.$message({
                message: '密码更改成功,请重新登录',
                type: 'success',
              });
              this.$router.push('/login');
            } else if (r.data.code == 500) {
              this.$message({
                message: '该用户不存在',
                type: 'error'
              });
            } else if (r.data.code == 505) {
              this.$message({
                message: '两次输入的新密码不一致',
                type: 'error'
              });
            }
            else {
              this.$message({
                message: '更改密码失败',
                type: 'error'
              });
            }
          }
      )
    },
  }
}
</script>

<style scoped>
.login-form {
  width: 600px;
  margin: 10px 50px; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../img/final.jpg");
}
/* 标题 */
.login-title {
  color: #303133;
  text-align: center;
}
.loginButton{
  align:center;
  width: 270px;
}
</style>